<!--活动须知-->
<template>
  <div class="container rule">
    <img src="../common/images/rule.png" class="rule-bg">
    <img src="../common/images/rule_close.png" class="rule-close" @click="ruleBack">
    <img src="../common/images/active_bottom.png" class="rule-bottom">
  </div>
</template>

<script>
  export default {
    methods: {
      ruleBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import '../common/stylus/base.styl'
  @media screen and (max-height vw(1334))
    .container
      width 100vw
      height vw(1334)
  @media screen and (min-height vw(1334))
    .container
      width 100vw
      height 100vh
  .container
    width 100vw
    position relative
    background url('../common/images/index_bg.png') repeat 100% 100%
  .rule
    .rule-bg
      width 100%
      height auto
      display block
    .rule-close
      width vw(40)
      height vw(40)
      position absolute
      top vw(30)
      right vw(30)
      z-index 10
    .rule-bottom
      width 100%
      position absolute
      bottom 0
</style>
